<template>
	<view class="">
		<e-popup mode="top" :safeAreaInsetBottom="false" :closeOnClickOverlay="true" round="16" bgColor="#f8f8f8" :show="show" @close="close">
			<view class="sort-box" :style="{'margin-top':  marginTop}">
				<scroll-view scroll-y="true">
					<view 
					class="sort-list"
					:class="[ current==index ? 'c-primary':'c-333' ]"
					v-for="(item,index) in list" :key="item.id"
					@tap="getCurrent(item,index)">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
		</e-popup>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		marginTop:String
	},
	data() {
		return {
			list:[
				{
					id:1,
					name:this.$t('nearby.智能排序')
				},
				{
					id:2,
					name:this.$t('nearby.距离优先')
				},
				{
					id:3,
					name:this.$t('nearby.好评优先')
				},
				{
					id:4,
					name:this.$t('nearby.销量优先')
				},
				{
					id:5,
					name:this.$t('nearby.低价优先')
				},
				{
					id:6,
					name:this.$t('nearby.高价优先')
				}
			],
			current:0
		};
	},
	methods: {
		close() {
			this.$emit('close', this.show);
		},
		getCurrent(item,index){
			this.current=index;
			this.$emit('change', item)
			this.close()
		}
	}
};
</script>

<style scoped lang="scss">
	.sort-box{
		max-height: 50vh;
		margin-top: 418rpx;
		scroll-view{
			max-height: 50vh;
			.sort-list{
				padding: 30rpx 20rpx;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
</style>
